<template>
	<view v-if="resultDetails">
		<view v-if="resultShow" class="result-container">
			<image :src="resultTopImg" class="result-img" mode="widthFix" />
			<image :src="staticImgs.img4" class="bg-img4" />
			<image :src="staticImgs.img5" class="bg-img5" />
      <view class="bg-img3" :style="{backgroundImage: `url(${staticImgs.img3})`}" />
			<view class="center-box">
		  	<view class="canvas-box" :style="{backgroundImage: `url(${staticImgs.chartBg})`}">
				  <view class="radar-canvas" v-if="showCanvas">
            <view class="chart-label" v-for="(itemName, index) in RadarModel.categories" :key="index">{{itemName}}</view>
				  	<CommonChart type="radar" :chartData="RadarModel" background="none" canvasId="school_b"
				  		:animation="false" :canvas2d="false" :opts="{
				         dataLabel: true,
				         fontColor: '#7B2525',
				         fontSize: 14,
				         background: 'rgba(255,255,255,0)',
				         legend: {
				           show: false
				         },
				         extra: {
				           radar: {
				             gridType: 'radar',
				             radius: 90,
				             labelShow: false,
				             border: true,
				             gridCount: 4,
				             axisLabel: false,
				             max: radarMax,
				             linearType: 'custom',
                     customColor: ['#FBBF89', '#FFF'],
                     opacity: 0.4,
                     gridColor: '#AAB8CF',
                     labelPointColor: '#FBBF89'
				           }
				         },
				         color: '#FBBF89'
				       }" />
				  </view>
        </view>
			</view>
      <view class="character" v-if="resultDetails[0] && resultDetails[0].resultDesc">
        <view v-for="(itemText, index) in resultDetails[0].resultDesc.content" :key="index">{{itemText}}</view>
      </view>
      <view class="result-main" v-if="resultDetails.length">
        <template v-for="(resultDetail, index) in resultDetails">
          <view class="result-main-item" :key="index" v-if="index > 0 && resultDetail && resultDetail.resultDesc">
            <image class="result-main-title" :src="`${staticImgs[`title${index}`]}`" />
            <view class="flex-between">
              <view :style="{backgroundImage: `url(${staticImgs.score})`}" class="result-main-score-img">我的得分{{resultDetail.score}}</view>
              <view class="result-main-score-text">总分区间 1-6</view>
            </view>
            <view class="result-main-subtitle flex-cc" :style="{backgroundImage: `url(${staticImgs.titleBg})`}">{{resultDetail.resultDesc.title}}</view>
            <view class="result-main-content" v-for="(text, index) in resultDetail.resultDesc.content" :key="index">{{text}}</view>
          </view>
        </template>
      </view>
      <view class="score" :style="{backgroundImage: `url(${staticImgs.scoreBg})`}" v-if="resultDetails[0]">
        <view class="score-title">我的得分</view>
        <view class="score-content">{{resultDetails[0].score}}</view>
      </view>
			<image class="back-btn" @click="showResult(false)" :src="staticImgs.backBtn" />
		</view>
		<view v-else class="share-container" @touchmove.stop.prevent>
			<image :src="resultFullImg" mode="widthFix" class="share-full-bg" show-menu-by-longpress />
			<image :src="resultImg" mode="widthFix" class="share-bg" show-menu-by-longpress />
			<view class="result-btn-row flex-between">
				<image :src="staticImgs.leftIcon" class="result-decoration" />
				<image :src="staticImgs.resultBtn" class="result-btn" @click="showResult(true)" key="result-btn" />
				<image :src="staticImgs.rightIcon" class="result-decoration" />
			</view>
			<view class="download">
				<view class="download-text">长按保存</view>
				<image :src="staticImgs.downloadIcon" class="download-icon" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		useDrawPoster
	} from '@/components/u-draw-poster'
	import CommonChart from '@/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		components: {
			CommonChart
		},
		props: {
			pageData: {
				type: Object,
				default: () => ({})
			},
			showCanvas: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				staticImgs: {
          img3: this.imgBaseURL + '/scl/result/queen/bg3.png',
          img4: this.imgBaseURL + '/scl/result/queen/bg4.png',
          img5: this.imgBaseURL + '/scl/result/queen/bg5.png',
          scoreBg: this.imgBaseURL + '/scl/result/queen/score.png',
					defaultQrcode: this.imgBaseURL + '/scl/default_miniapp_qrcode_new.png',
					backBtn: this.imgBaseURL + '/scl/result/queen/back.png',
					resultBtn: this.imgBaseURL + '/scl/result/goddess/result-btn-new.png',
					downloadIcon: this.imgBaseURL + '/scl/result/queen/download.png',
					leftIcon: this.imgBaseURL + '/scl/result/goddess/left.png',
					rightIcon: this.imgBaseURL + '/scl/result/goddess/right.png',
          title1: this.imgBaseURL + '/scl/result/queen/title1.png',
          title2: this.imgBaseURL + '/scl/result/queen/title2.png',
          title3: this.imgBaseURL + '/scl/result/queen/title3.png',
          title4: this.imgBaseURL + '/scl/result/queen/title4.png',
          title5: this.imgBaseURL + '/scl/result/queen/title5.png',
          score: this.imgBaseURL + '/scl/result/queen/opt-score.png',
          titleBg: this.imgBaseURL + '/scl/result/queen/title.png',
          chartBg: this.imgBaseURL + '/scl/result/queen/chart_bg.png'
				},
				resultDetails: undefined,
				imgBaseUrl: this.imgBaseURL,
				resultShow: false,
				resultImg: '',
				listData: [],
				RadarModel: [],
				radarMax: 5,
				scloReportDetail: null,
        resultFullImg: '',
        resultTopImg: ''
			}
		},
		computed: {
			...mapGetters('user', ['clientUserUid', 'adType'])
		},
		watch: {
			pageData: {
				handler(val) {
					if (val) {
						const resultDetails = val.resultDetails.resultList
            this.resultSetMap = val.resultDetails.resultSetMap
						this.resultDetails = resultDetails.map(detail => {
              if (detail) {
                try {
                  detail.resultDesc = JSON.parse(detail.resultDesc)
                } catch {
                  detail.resultDesc = {}
                }
              }
              return detail
            })
						this.initCanvas()
						this.initRandar()
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			initRandar() {
				let categoriesArr = []
				let tmpScoreArr = []
				this.resultSetMap.map(item => {
					categoriesArr.push(item.dmnsName)
					tmpScoreArr.push(Number(item.myScore))
				})
				this.RadarModel = {
					"categories": categoriesArr,
					"series": [{
						"name": "雷达图",
						"color": '#FBBF89',
						"data": tmpScoreArr,
						"index": 0,
						"pointShape": "circle",
						"show": true,
						"type": "radar",
						"labelShow": true,
            textColor: '#7B2525',
            textSize: 14
					}]
				}
			},
			showResult(flag) {
				this.resultShow = flag
				if (!this.resultShow) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 0
					})
				}
				this.$emit('posterLoadingCom', flag)
			},
			async initCanvas() {
				let jumpUrl = 'p=2@id=' + this.pageData.sclId
        this.resultImg = this.resultDetails[0]?.resultDesc?.resultBg
        this.resultTopImg = this.resultDetails[0]?.resultDesc?.bg + '?t=1'
				this.resultFullImg = await this.createChipCanvas(this.resultDetails[0]?.resultDesc?.fullBg, jumpUrl);
			},
			/**
			 * 绘制海报
			 */
			async createChipCanvas(imgUrl, jumpUrl) {
				console.log(jumpUrl, '-----------------imgUrl');
				const tmpScene = jumpUrl || 'r=5@id=' + this.clientUserUid
				const tmpPage = 'pages/index/index'
				let qrCode = this.staticImgs.defaultQrcode
				let imgD = ''

				const resSclInfo = await this.$u.api.getSclInfo({sclId:this.pageData.sclId})
				if(resSclInfo.data.data.url){
					qrCode = resSclInfo.data.data.url
				}else{
					const {
						data: dRes
					} = await this.$u.api.getQrcodeUrl({
						sceneStr: tmpScene,
						pageStr: tmpPage
					})

					if (dRes.success) {
						qrCode = dRes.data
					}
				}

				console.log(qrCode, '------#----qrCode')

				try {
					// 创建绘制工具
					const dp = await useDrawPoster({
						selector: 'dcanvas',
						loading: {
							create: '结果报告生成中...'
						},
						debug: true,
						width: 750,
						height: 1861
					})
					const w = dp.canvas.width
					const h = dp.canvas.height

					console.log(dp.canvas, '-----------dp.canvas-------')

					dp.draw(async (ctx) => {
						console.log(ctx, '-----------ctx')
						// 绘制背景图
						await ctx.drawImage(imgUrl, 0, 0, w, h)
						// 小程序二维码
						await ctx.drawRoundImage(qrCode, 138, 1663, 125, 125,
							100)
					})

					imgD = await dp.create()
				} catch (e) {
					console.log(e, '绘图')
				}
				console.log(imgD, '=========imgD')
				return imgD || imgUrl
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes move {
		0%,
		50%,
		100% {
			transform: translateY(0);
		}

		25% {
			transform: translateY(50rpx);
		}

		75% {
			transform: translateY(-50rpx);
		}
	}

	@keyframes flash {
		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}
	}


	.result-container {
		padding-bottom: 160rpx;
    background-color: #F6D3A7;
    position: relative;
	}

	.result-img {
		width: 100%;
		height: 1351rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
	}

	.back-btn {
		position: fixed;
		right: 0;
		top: 771rpx;
		width: 215rpx;
		height: 251rpx;
		animation: move 6s linear infinite;
    z-index: 100;
	}

	.share-container {
		position: relative;
		height: 1624rpx;
    overflow: hidden;
    min-height: 100vh;
	}

	.share-bg {
		width: 100%;
		height: 1624rpx;
    min-height: 100vh;
		position: absolute;
		left: 0;
		top: 0;
    z-index: 2;
    pointer-events: none;
    background-color: #F8E0B1;
	}

  .share-full-bg {
    width: 100%;
    height: 1861rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }

	.result-btn-row {
		position: absolute;
		bottom: 124rpx;
		left: 50rpx;
		right: 50rpx;
		pointer-events: none;
    z-index: 3;
	}

	.result-btn {
		width: 360rpx;
		height: 70rpx;
		pointer-events: auto;
	}

	.result-decoration {
		width: 102rpx;
		height: 104rpx;
		pointer-events: none;
		animation: flash 1s linear infinite;
	}

	.download {
		position: absolute;
		bottom: 65rpx;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
    z-index: 3;

		.download-text {
			font-weight: bold;
			font-size: 29rpx;
      color: #BE5533;
		}

		.download-icon {
			width: 32rpx;
			height: 32rpx;
			margin-left: 12rpx;
		}
	}

  .score {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    left: 0;
    top: 628rpx;
    width: 264rpx;
    height: 182rpx;
    z-index: 10;

    .score-title {
      margin-top: 25rpx;
      font-weight: bolder;
      font-size: 40rpx;
      color: #591A17;
      line-height: 56rpx;
      letter-spacing: 4rpx;
      text-align: center;
    }

    .score-content {
      text-align: center;
      font-weight: bolder;
      font-size: 80rpx;
      color: #591A17;
      line-height: 112rpx;
      letter-spacing: 9rpx;
      margin-top: -10rpx;
    }
  }

  .bg-img3 {
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top center;
    position: absolute;
    top: 3915rpx;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
  }

  .bg-img4 {
    height: 4694rpx;
    position: absolute;
    width: 100%;
    top: 1095rpx;
    left: 0;
    right: 0;
    z-index: 1;
  }

  .bg-img5 {
    width: 703rpx;
    height: 833rpx;
    position: absolute;
    top: 1022rpx;
    left: 0;
    right: 0;
    z-index: 3;
    margin: 0 auto;
  }

  .center-box {
    position: absolute;
    width: 100%;
    top: 1227rpx;
    left: 0;
    right: 0;
    z-index: 20;
  }

  .canvas-box {
    width: 629rpx;
    height: 455rpx;
    background-size: 373rpx 373rpx;
    margin: 0 auto;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center 74rpx;
    position: relative;
  }

  .character {
    font-size: 32rpx;
    color: #7B2525;
    line-height: 52rpx;
    letter-spacing: 3rpx;
    top: 2096rpx;
    left: 0;
    right: 0;
    text-align: center;
    position: absolute;
    z-index: 20;
  }

  .result-main {
    position: relative;
    padding-top: 2422rpx;
    padding-bottom: 134rpx;
    z-index: 20;
  }

  .result-main-item {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.47) 0%, rgba(233, 233, 233, 0.47) 100%);
    border-radius: 50rpx 50rpx 72rpx 26rpx;
    margin: 50rpx 34rpx 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 63rpx;
  }

  .result-main-title {
    margin: 50rpx auto;
    width: 390rpx;
    height: 60rpx;
  }

  .result-main-score-img {
    margin-left: -12rpx;
    width: 244rpx;
    height: 105rpx;
    font-weight: bold;
    font-size: 36rpx;
    color: #FFF;
    letter-spacing: 4rpx;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 36rpx 0 0 30rpx;
    box-sizing: border-box;
  }

  .result-main-score-text {
    margin-right: 26rpx;
    font-size: 32rpx;
    color: #650F0F;
    letter-spacing: 3rpx;
  }

  .result-main-subtitle {
    margin: 30rpx auto 16rpx;
    font-weight: bold;
    font-size: 50rpx;
    color: #863535;
    width: 542rpx;
    height: 88rpx;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .result-main-content {
    font-size: 32rpx;
    color: #650F0F;
    line-height: 52rpx;
    letter-spacing: 3rpx;
    text-align: justify;
    margin-top: 38rpx;
    padding: 0 25rpx;
  }

  .chart-label {
    position: absolute;
    width: 156rpx;
    height: 50rpx;
    background-image: linear-gradient(270deg, transparent 0%, #FFF 50%, transparent 100%);
    font-weight: bolder;
    font-size: 28rpx;
    color: #7B2525;
    line-height: 50rpx;
    text-align: center;

    &:nth-child(1) {
      top: 15rpx;
      left: 0;
      right: 0;
      margin: 0 auto;
    }

    &:nth-child(2) {
      top: 170rpx;
      right: 0;
    }

    &:nth-child(3) {
      top: 420rpx;
      right: 72rpx;
    }

    &:nth-child(4) {
      top: 420rpx;
      left: 72rpx;
    }

    &:nth-child(5) {
      top: 170rpx;
      left: 0;
    }

  }
</style>